<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <title>需求报价</title>
</head>
<script>
  var obpmFilePath = '/obpm'
  var appName = 'srm'
  function getParam(name) {
    return location.href.match(new RegExp('[?#&]' + name + '=([^?#&]+)', 'i')) ? RegExp.$1 : '';
  }
  var SupplierId = getParam('SupplierId');
  var allData = {} //整个页面的数据
  var timer = null
  var ajax = function (data) {
    return new Promise((resolve, reject) => {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (
            (xhr.status >= 200 && xhr.status < 300) ||
            xhr.status === 304
          ) {
            // resolve(xhr.responseText);
            data.success(xhr.responseText);
          } else {
            reject(xhr.status);
          }
        } else {
          // HTTP请求还在继续...
        }
      };
      xhr.open(data.methods, data.url, data.async);
      xhr.setRequestHeader("content-type", "application/json");

      delete data.methods;
      delete data.url;
      xhr.send(JSON.stringify(data.data));
    });
  };
  function changeSupplierPrice(dom,index,num) {
    if (timer !== null) clearTimeout(timer)
      timer = setTimeout(() => {
        console.log('123')
        let Supplier_Price =  Number(dom.value)  //供应商报单价
        let Supplier_Total = Supplier_Price * Number(num) //供应商报总价
        let total = document.getElementsByClassName('Supplier_Total_' + index)[0]
        total.innerHTML = Supplier_Total
        allData.Detail[index].Supplier_Price = Supplier_Price
        allData.Detail[index].Supplier_Total = Supplier_Total
      }, 500)
  }
  function changeSupplierRemarks(dom, index) {
    let Supplier_Remarks = dom.value
    allData.Detail[index].Supplier_Remarks = Supplier_Remarks
  }
  function toGetInfo() {
    let needBasicHtml = ''//需求基本信息html
    let needDetailTbody = '' //需求明细的tbody
    let supplierInfoHtml = '' //供应商信息html
    let getInfo = {
      methods: "get",
      url: `${obpmFilePath}/magic-api/${appName}/getDemand?SupplierId=${SupplierId}`,
      async: true,
      success: function (result) {
        if (result) {
          if(JSON.parse(result)) {
            let needData = JSON.parse(result)
            allData = needData
            let Demand_Document;
            if(allData.Demand_Document) {
              Demand_Document = JSON.parse(allData.Demand_Document)
            }
            let Demand_DocumentHtml = ''
            if(Demand_Document) {
              for(let j = 0; j < Demand_Document.length; j ++) {
                Demand_DocumentHtml += `<span class="linkWord">${Demand_Document[j].name}</span>`
              }
            }
            let needBasicInfoDom = document.getElementsByClassName('needBasicInfo')[0] //需求基本信息
            needBasicHtml += `
              <div class="infoTitle">需求基础信息</div>
              <div class="infoOnce">
                <span class="infoSpan">需求编号： ${needData.Demand_Number}</span>
                <span>需求名称： ${needData.Demand_Name}</span>
              </div>
              <div class="infoOnce">
                <span class="infoSpan">预计到达日期： ${needData.Arrival_Date}</span>
                <span>成交日期： ${needData.Completion_Date}</span>
              </div>
              <div class="infoOnce">
                <span class="infoSpan">报价结束时间： ${needData.Quotation_End_Time}</span>
                <span>状态： ${needData.Status}</span>
              </div>
              <div class="infoOnce">
                <span class="infoSpan">收获地址： ${needData.Delivery_Address}</span>
                <span>采购负责人： ${needData.LeaderName}</span>
              </div>
              <div class="infoOnce">
                <div style="display:flex;">
                  <span>需求文档： </span>
                  <span style="display:flex;flex-direction: column;">
                    ${Demand_DocumentHtml}
                  </span>
                </div>
              </div>
            `
            needBasicInfoDom.innerHTML = needBasicHtml
            let needDetailDom = document.getElementsByClassName('needDetailTbody')[0] //需求明细
            let detail = needData.Detail
            for(let i = 0; i < detail.length; i ++) {
              needDetailTbody += 
              `
                <tr>
                  <td><input type="text" value="0" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')" oninput="changeSupplierPrice(this,'${i}','${detail[i].Quantity}')"></td>
                  <td class="Supplier_Total_${i}">-</td>
                  <td><input type="text" onchange="changeSupplierRemarks(this,'${i}')"></td>
                  <td>${detail[i].Goods_Name}</td>
                  <td>${detail[i].Unit}</td>
                  <td>${detail[i].Specs_Quantity}</td>
                  <td>${detail[i].Specs_Name}</td>
                  <td>${detail[i].Quantity}</td>
                  <td>${detail[i].Price}</td>
                  <td>${detail[i].Total_Amount}</td>
                  <td>${detail[i].Remarks}</td>
                  <td>${detail[i].LeaderName2}</td>
                </tr>
              `
            }
            needDetailDom.innerHTML = needDetailTbody
            let supplierInfoDom = document.getElementsByClassName('supplierInfo')[0] //供应商信息
            supplierInfoHtml += `
            <div class="infoTitle">供应商信息</div>
            <div class="infoOnce">
              <span class="infoSpan">供应商名称： ${needData.Supplier_Name}</span>
              <span>电话号码： ${needData.Telephone}</span>
            </div>
            `
            supplierInfoDom.innerHTML = supplierInfoHtml
          }else {
          }
        }
      },
    };
    ajax(getInfo); 
  }
  function onSubmit() {
    if(confirm('确认是否提交？')) {
      let Submit_Time = '';
      let date = new Date();
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())+ ':';
      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); 
      Submit_Time = Y+M+D+h+m+s;
      allData.Submit_Time = Submit_Time
      console.log(allData,'allData')
      let quotation = {
        methods: "post",
        url: `${obpmFilePath}/magic-api/${appName}/quotation`,
        async: true,
        data:allData,
        success: function (result) {
          if (result) {
            if(JSON.parse(result)) {
              if(JSON.parse(result).Code == 200) {
                alert('提交成功')
                window.close()
              }else {
                alert(JSON.parse(result).Msg)
              }
            }else {
            }
          }
        },
      };
      ajax(quotation); 
    }
  }
</script>
<body onload="toGetInfo()">
  <div id="main">
    <div class="hearder">需求报价</div>
    <div class="needBasicInfo">
    </div>
    <div class="needDetail">
      <div class="infoTitle">需求明细</div>
      <table style="border-collapse:collapse;" class="needTable">
        <thead>
          <tr>
            <th>供应商报单价</th>
            <th>供应商报总价</th>
            <th>供应商备注</th>
            <th>货品名称</th>
            <th>单位</th>
            <th>规格数量</th>
            <th>规格名称</th>
            <th>需求数量</th>
            <th>预计采购单价</th>
            <th>预计总金额(元)</th>
            <th>采购需求备注</th>
            <th>采购负责人</th>
          </tr>
        </thead>
        <tbody class="needDetailTbody">
        </tbody>
    </table>
    </div>
    <div class="supplierInfo"></div>
    <div class="submit">
      <span onclick="onSubmit()">提交</span>
    </div>
  </div>
</body>
</html>